<style lang="scss" scoped>
    .my-plans-wrap{
        background: $default;
        min-height: 100%;
        padding-bottom: 80px;
        .user-info {
            display: flex;
            padding: 33px 0 35px 45px;
            .avatar {
                width: 67px;
                height: 67px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 19px;
            }
            .infos{
                .phone-name{
                    margin-top: 16px;
                    .name{
                        font-size: 12px;
                    }
                    .phone{
                        font-size: 10px;
                        color: $fontColor;
                        margin-left: 29px;
                    }
                }
                .name{
                    font-size: 12px;
                    color: $fontColor;
                    margin-top: 4px;
                }
            }
        }
    }
    .plans-list {
        padding: 0 16px;
        overflow: hidden;
        .item {
            position: relative;
            margin-bottom: 30px;
            padding-top: 6px;
            .state-wrap{
                position: absolute;
                top:0px;
                right: 10px;
                width: 154px;
                height: 31px;
                color: $white;
                font-size: 12px;
                line-height: 31px;
                .state-before{
                    content: '';
                    position: absolute;
                    top:0;
                    left:-2px;
                    width: 4px;
                    height: 6px;
                    background: $btnColor;
                    transform: skewX(-33deg);
                    z-index: 1;
                }
                .state-content{
                    position: absolute;
                    top:0;
                    left:0;
                    height:100%;
                    width: 100%;
                    z-index: 2;
                    font-size: 12px;
                    text-align: center;
                    border-radius: 0 0 6px 6px;
                    background: $bgColor;
                    .wait{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        text-align: left;
                        .cancel{
                            width: 60px;
                            padding-left: 14px;
                            box-sizing: border-box;
                            margin-left: 14px;
                            height: 17px;
                            line-height: 17px;
                            font-size: 10px;
                            background: url("/static/cancel.png") 100% 50% no-repeat;
                            border-left: 1px solid #ffffff;
                        }
                    }
                }
                &.canceled{
                    .state-before{
                        background: #4C4C4C;
                    }
                    .state-content{
                        background: $gray;
                    }
                }
                &.ended{
                    .state-before{
                        background: #02234C;
                    }
                    .state-content{
                        background: $btnColor;
                    }
                }
            }
            .item-info{
                background: $white;
                border-radius: 6px;
                padding: 11px 21px;
                .time{
                    font-size: 10px;
                    color: $gray;
                }
                .title{
                    font-size: 14px;
                    margin: 8px 0 15px 0;
                }
                .plan-info {
                    display: flex;
                    flex-wrap: wrap;
                    .plan-common{
                        width: 150px;
                        display: flex;
                        margin-bottom: 3px;
                        .name{
                            width: 52px;
                            font-size: 10px;
                            color: $gray;
                        }
                        .content{
                            width: 98px;
                            font-size: 10px;
                            color: #232323;
                        }
                    }
                }
            }
        }
    }
</style>

<template>
   <div class="my-plans-wrap">
       <div class="user-info">
           <div class="avatar">
               <img src="/static/img2.png" alt="">
           </div>
           <div class="infos">
               <p class="phone-name">
                   <span class="name"> First Last </span>
                   <span class="phone">
                       130000000
                       <span class="checked">（已验证）</span>
                   </span>
               </p>
               <p class="name">Wechat name</p>
           </div>
       </div>
       <div class="plans-list">
           <div class="item" v-for="(item,i) in plans" :key="i">
               <div class="state-wrap" :class="{ended: item.state === 'ended',canceled: item.state === 'canceled'}">
                   <div class="state-before"></div>
                   <div class="state-content">
                       <router-link class="link wait" to="{path: '/'}" v-if="item.state === 'waiting'">
                           <span class="state">等待接洽</span>
                           <span class="cancel">撤销</span>
                       </router-link>
                       <router-link class="link" to="{path: '/'}" v-if="item.state === 'ended'">
                           查看方案与报价
                       </router-link>
                       <p v-else>已取消 (酒店无场地)</p>
                   </div>
                   
               </div>
               <div class="item-info">
                   <p class="time">
                       提交时间：
                       <span>2018-6-1 16:20:32</span>
                   </p>
                   <p class="title">上海外滩华尔道夫酒店</p>
                   <div class="plan-info">
                        <div class="plan-common">
                            <span class="name">会议项目：</span>
                            <span class="content">会议、餐饮</span>
                        </div>
                       <div class="plan-common">
                           <span class="name">开始日期：</span>
                           <span class="content">2018-12-21</span>
                       </div>
                       <div class="plan-common">
                           <span class="name">会议类型：</span>
                           <span class="content">公司年会</span>
                       </div>
                       <div class="plan-common">
                           <span class="name">会议时长：</span>
                           <span class="content">1天</span>
                       </div>
                       <div class="plan-common">
                           <span class="name">参会人数：</span>
                           <span class="content">300-400</span>
                       </div>
                       <div class="plan-common">
                           <span class="name">会议预算：</span>
                           <span class="content">3-5万</span>
                       </div>
                       <div class="plan-common">
                           <span class="name">其 &nbsp&nbsp&nbsp&nbsp 他：</span>
                           <span class="content">无</span>
                       </div>
                   </div>
               </div>
               
           </div>
       </div>
       <footer-component activeItem="plan"></footer-component>
   </div>
</template>

<script>
    import Choice from '@/views/choice'
    import FooterComponent from '@/views/footer'
    export default {
    	components: {
            FooterComponent
        },
        computed: {
        },
    
        filters: {},
        data() {
            return {
                plans: [
                    {
                    	title: '上海外滩华尔道夫酒店',
                        state: 'ended'
                    },
                    {
                        title: '上海外滩华尔道夫酒店',
                        state: 'canceled'
                    },
                    {
                        title: '上海外滩华尔道夫酒店',
                        state: 'waiting'
                    }
                ]
            };
        },
        mounted() {
    		
        },
        methods: {
        
        }
    };
</script>

